<template>
  <div class="zznbpsettingdiv">
    <div @click="isshowdia = true">
      <icon-svg
        icon-class="icon_shezhi"
        :color="'#fff3'"
        :width="'30'"
        :height="'30'"
        style="cursor: pointer"
      ></icon-svg>
    </div>
    <el-dialog
      title="修改布局"
      :visible.sync="isshowdia"
      width="30%"
      @close="isshowdia = false"
      :modal-append-to-body="false"
    >
      <el-divider content-position="center">调节行高度</el-divider>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">第一行:</el-col>
        <el-col :span="12" :offset="0">
          <el-input v-model="row1" size="normal" label="第一行"> </el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">第二行:</el-col>
        <el-col :span="12" :offset="0"
          ><el-input v-model="row2" size="normal" label="第一行"> </el-input
        ></el-col>
      </el-row>
      <el-divider content-position="center">调节第二行列宽度</el-divider>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">第二行第一列:</el-col>
        <el-col :span="12" :offset="0"
          ><el-input v-model="col1" size="normal" label="第一行"> </el-input
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">第二行第二列:</el-col>
        <el-col :span="12" :offset="0"
          ><el-input v-model="col2" size="normal" label="第一行"> </el-input
        ></el-col>
      </el-row>

      <span slot="footer">
        <el-button @click="isshowdia = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "zznbp2setting",
  components: {},
  data() {
    return {
      isshowdia: false,
      row1: 0,
      row2: 0,
      col1: 0,
      col2: 0,
    };
  },
  computed: {},
  watch: {},
  mounted() {
    let setting = this.$root.setting.data;
    console.log(setting);
    this.row1 = setting.rows[0].flex;
    this.row2 = setting.rows[1].flex;
    this.col1 = setting.rows[1].topblocks[0].middleblocks[0].blocks[0].flex;
    this.col2 = setting.rows[1].topblocks[0].middleblocks[0].blocks[1].flex;
  },
  methods: {
    confirm() {
      let setting = this.$root.setting.data;
      setting.rows[0].flex = this.row1;
      setting.rows[1].flex = this.row2;
      setting.rows[1].topblocks[0].middleblocks[0].blocks[0].flex = this.col1;
      setting.rows[1].topblocks[0].middleblocks[0].blocks[1].flex = this.col2;
      localStorage.setItem("zhengzhoubanping2setting", JSON.stringify(setting));

      this.$message.success("修改布局配置成功")
      this.isshowdia = false

    },
  },
};
</script>
<style lang='scss' scoped>
.aaa {
  position: absolute;
}
</style>